/**
 * Options javascript observer
 */ 
window.addEventListener('load', function() {    
    // localization
    var html = '<h1>'+lc.preferences.serverLoadMonitorPreferences+'</h1>'+
    '<form>'+
        '<label for="url"><h3 id="url-label">'+lc.preferences.backendUrl+'</h3></label>'+
        '<input type="text" name="url" value="" />'+
        '<div>'+
            '<div class="left">'+
                '<h3 id="info-label">'+lc.preferences.shownInfo+'</h3>'+
                '<ul>'+
                    '<li><input type="checkbox" name="info[]" id="info-cpu" value="cpu"/> <label for="info-cpu">'+lc.preferences.cpu+'</label></li>'+
                    '<li><input type="checkbox" name="info[]" id="info-mem" value="mem"/> <label for="info-mem">'+lc.preferences.memory+'</label></li>'+
                    '<li><input type="checkbox" name="info[]" id="info-tx" value="tx"/> <label for="info-tx">'+lc.preferences.transferRate+'</label></li>'+
                    '<li><input type="checkbox" name="info[]" id="info-rx" value="rx"/> <label for="info-rx">'+lc.preferences.receiveRate+'</label></li>'+
                '</ul>'+
            '</div>'+
            '<div class="right">'+
                '<h3 id="update-label">'+lc.preferences.updateInterval+'</h3>'+
                '<ul>'+
                    '<li><input type="radio" name="update" id="update-10" value="10"/> <label for="update-10">'+lc.preferences.every10Min+'</label></li>'+
                    '<li><input type="radio" name="update" id="update-30" value="30"/> <label for="update-30">'+lc.preferences.every30Min+'</label></li>'+
                    '<li><input type="radio" name="update" id="update-60" value="60"/> <label for="update-60">'+lc.preferences.everyHour+'</label></li>'+
                '</ul>'+
            '</div>'+
        '</div>'+
        '<div class="clear"/>'+
    '</form>';
    $('div.wrapper').html(html);
    Preferences.setFormFields();
    
    $('input').change(function() {
        Preferences.readFormFields();
        Preferences.savePreferences();
    });
});
